import React, { useEffect, useState } from "react";
import { Search } from "react-vant";
import { Swiper, Image } from "react-vant";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";
import "../Shop/index.css";
const Index: React.FC = () => {
  const [value, setValue] = useState("");
  const navigate = useNavigate();

  const dian = () => {
    navigate("/dian");
  };

  const gao = () => {
    navigate("/xq");
  };

  const fodetail = () => {
    navigate("/dan");
  };

  const [yzdp, setYzdp] = useState([]);
  const render = () => {
    axios.get("/api/yzdp").then((resp) => {
      setYzdp(resp.data.yzdp);
    });
  };

  useEffect(() => {
    render();
  }, []);

  const shopdetail = (it: any) => {
    localStorage.setItem("carItem", JSON.stringify(it));
    navigate(`/shopdetail`);
  };

  const Erectile = () => {
    navigate("/erectile");
  };
  const healthcheck = () => {
    navigate("/healthcheck");
  };
  const Orthopedics = () => {
    navigate("/Orthopedics");
  };

  return (
    <div>
      <div className="box1" onClick={() => navigate("/search")}>
        <Search
          value={value}
          onChange={setValue}
          clearable
          placeholder="请输入搜索关键词"
          className="seaar"
        />
        ;
        <img
          src="../src/assets/1.jpg"
          alt=""
          className="Image"
          onClick={fodetail}
        />
        {/* <p>订单</p> */}
      </div>
      <div className="box2">
        <Swiper>
          <Swiper.Item>
            <div>
              <div>
                <img
                  src="../../../../src/assets/yybj.png"
                  onClick={() => navigate("/protection")}
                />
              </div>
              <div>营养保健</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/nxjk.png" onClick={Erectile} />
              </div>
              <div>男性健康</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/pfyy-1.png"
                  onClick={() => navigate("/singkin")}
                />
              </div>
              <div>皮肤用药</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/yljx.png"
                  onClick={() => navigate("/medical")}
                />
              </div>
              <div>医疗机械</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/jfss.png"
                  onClick={() => navigate("/slimming")}
                />
              </div>
              <div>减肥瘦身</div>
            </div>

            <div>
              <div>
                <img
                  src="../../../../src/assets/vxjk.png"
                  onClick={() => navigate("/female")}
                />
              </div>
              <div>女性健康</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/cwyy.png"
                  onClick={() => navigate("/gastroint")}
                />
              </div>
              <div>肠胃用药</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/yjym.png"
                  onClick={healthcheck}
                />
              </div>
              <div>体检疫苗</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/jtcb.png"
                  onClick={() => navigate("/familyR")}
                />
              </div>
              <div>家庭常备</div>
            </div>
            <div>
              <div>
                <img
                  src="../../../../src/assets/fsgk.png"
                  onClick={Orthopedics}
                />
              </div>
              <div>风湿骨科</div>
            </div>
          </Swiper.Item>
          <Swiper.Item>
            <div>
              <div>
                <img src="../../../../src/assets/vxjk.png" />
              </div>
              <div>女性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/cwyy.png" />
              </div>
              <div>肠胃用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yjym.png" />
              </div>
              <div>体检疫苗</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jtcb.png" />
              </div>
              <div>家庭常备</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/fsgk.png" />
              </div>
              <div>风湿骨科</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yybj.png" />
              </div>
              <div>营养保健</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/nxjk.png" />
              </div>
              <div>男性健康</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/pfyy-1.png" />
              </div>
              <div>皮肤用药</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/yljx.png" />
              </div>
              <div>医疗机械</div>
            </div>
            <div>
              <div>
                <img src="../../../../src/assets/jfss.png" />
              </div>
              <div>减肥瘦身</div>
            </div>
          </Swiper.Item>
        </Swiper>
      </div>

      <div className="box3">
        <h3>特惠好物</h3>
        <div className="tu">
          <div>
            <div>
              <img src="../src/assets/14.jpg" />
            </div>
            <div className="txt">避孕药一般指女性用避孕药</div>
            <div>￥328</div>
          </div>
          <div>
            <div>
              <img src="../src/assets/15.jpg" />
            </div>
            <div className="txt">避孕药一般指女性用避孕药</div>
            <div>￥328</div>
          </div>
          <div>
            <div>
              <img src="../src/assets/16.jpg" />
            </div>
            <div className="txt">避孕药一般指女性用避孕药</div>
            <div>￥328</div>
          </div>
        </div>
      </div>

      {yzdp.length > 0 &&
        yzdp.map((item, index) => (
          <div className="box4">
            <div className="box4title">{item.title}</div>
            <div className="box4top">
              <div>
                <img src="../../../../src/assets/17.jpg" />
                <div>
                  <div>微脉心选</div>
                  <div>{item.city}</div>
                </div>
              </div>
              <div className="jindian" onClick={() => dian()}>
                进店&gt;
              </div>
            </div>
            <div className="box4zhong">
              {item.sp.map((it, ind) => (
                <div onClick={() => shopdetail(it)} key={ind}>
                  <div className="box4zhongimg">
                    <img src={it.img} />
                  </div>
                  <div className="tw-title">{it.title}</div>
                  <div>{it.price}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
      <div className="button-btn"></div>
    </div>
  );
};

export default Index;
